<template>
  <div class="official-document">
    <header-tools name="回收"
                  @search="search"
                  @remove="batchRemove" />

    <!-- 数据列表 -->
    <data-table ref="JDataTable"
                title="回收"
                :total="total"
                :list="list"
                @change-page="changePage">
      <template slot="enclosure"
                slot-scope="{row}">
        <span v-if="row.enclosures.length<1">无附件</span>
        <template v-for="enclosure in row.enclosures">
          <div class="file-box"
               :key="enclosure.path"
               @click="downloadFile(enclosure)">
            <img :src="require('../images/file.png')" />
            <span class="file">{{enclosure.filename}}</span>
          </div>
        </template>
      </template>

      <template slot="action"
                slot-scope="{row}">
        <Button type="success"
                size="small"
                @click="returnOrigin(row)">还原</Button>
      </template>
    </data-table>

    <!-- loading -->
    <Spin v-show="loading"
          size="large"
          fix />
  </div>
</template>

<script>
import storage from 'good-storage';
import HeaderTools from '../HeaderTools';
import DataTable from '../DataTable';
import { ajaxPost } from 'global/axios';
import { domain2 } from 'global/setting';
import { diyDownload } from 'common/js/util';

export default {
  components: {
    'header-tools': HeaderTools,
    'data-table': DataTable,
  },

  data() {
    return {
      total: 0,
      list: [],
      loading: false,
      params: {
        url: '/bus/srmsg/garlist',
        token: storage.session.get('token'),
        data: {
          page: 1,
          pageSize: 10,
          searchValue: {
            srmsg_title: '',
          },
        },
      },
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    // 搜索
    search(keyword) {
      this.params.data.searchValue.srmsg_title = keyword
        ? `${keyword}|#|like`
        : '';
      this.params.data.page = 1;
      this.getData();
    },

    // 分页切换
    changePage(page) {
      this.params.data.page = page;
      this.getData();
    },

    // 获取数据
    getData() {
      this.loading = true;
      ajaxPost({
        ...this.params,
        success: res => {
          this.loading = false;
          if (res.data.code === '0000') {
            let { result, totalSize } = res.data.result;
            this.total = totalSize;
            this.list = result.map(item => {
              return item;
            });
          }
        },
      });
    },

    // 还原
    returnOrigin(row) {
      this.$Modal.confirm({
        content: '确定还原?',
        onOk: () => {
          this.loading = true;
          ajaxPost({
            data: {
              _id: row._id,
            },
            url: '/bus/srmsg/replymy',
            token: storage.session.get('token'),
            success: res => {
              this.loading = false;
              let { code, message } = res.data;
              this.$Message[code === '0000' ? 'success' : 'error'](message);
              code === '0000' && this.search('');
            },
          });
        },
      });
    },

    // 批量删除
    batchRemove() {
      let selection = this.$refs.JDataTable.getSelection();
      if (selection) {
        this.$Modal.confirm({
          content: '确定删除?',
          onOk: () => {
            this.loading = true;
            ajaxPost({
              data: {
                _ids: selection.map(item => item._id).join(','),
              },
              url: '/bus/srmsg/truedel',
              token: storage.session.get('token'),
              success: res => {
                this.loading = false;
                let { code, message } = res.data;
                this.$Message[code === '0000' ? 'success' : 'error'](message);
                code === '0000' && this.search('');
              },
            });
          },
        });
      }
    },

    // 下载附件
    downloadFile(data) {
      diyDownload(`${domain2}${data.path}`, data.filename);
    },
  },
};
</script>


<style lang="less" scope>
.official-document {
  width: 100%;
}
</style>